<!DOCTYPE html>
<html>
  <head>
    <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    Fore more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
    <!-- <base href="/"> -->
    <base href="$FLUTTER_BASE_HREF" />

    <meta charset="UTF-8" />
    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
    <meta name="description" content="A new Flutter project." />

    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="admin" />
    <link rel="apple-touch-icon" href="icons/Icon-192.png" />

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png" />

    <title>admin</title>
    <link rel="manifest" href="manifest.json" />
    <!-- Styling for loading indicator -->
    <style>
      body {
        background: #000;
      }

      #load {
        position: absolute;
        width: 600px;
        height: 36px;
        left: 50%;
        top: 40%;
        margin-left: -300px;
        overflow: visible;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
      }

      #load div {
        position: absolute;
        width: 20px;
        height: 36px;
        opacity: 0;
        font-family: Helvetica, Arial, sans-serif;
        animation: move 2s linear infinite;
        -o-animation: move 2s linear infinite;
        -moz-animation: move 2s linear infinite;
        -webkit-animation: move 2s linear infinite;
        transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        color: #35c4f0;
      }

      #load div:nth-child(2) {
        animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s;
      }
      #load div:nth-child(3) {
        animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        -webkit-animation-delay: 0.4s;
        -webkit-animation-delay: 0.4s;
      }
      #load div:nth-child(4) {
        animation-delay: 0.6s;
        -o-animation-delay: 0.6s;
        -moz-animation-delay: 0.6s;
        -webkit-animation-delay: 0.6s;
      }
      #load div:nth-child(5) {
        animation-delay: 0.8s;
        -o-animation-delay: 0.8s;
        -moz-animation-delay: 0.8s;
        -webkit-animation-delay: 0.8s;
      }
      #load div:nth-child(6) {
        animation-delay: 1s;
        -o-animation-delay: 1s;
        -moz-animation-delay: 1s;
        -webkit-animation-delay: 1s;
      }
      #load div:nth-child(7) {
        animation-delay: 1.2s;
        -o-animation-delay: 1.2s;
        -moz-animation-delay: 1.2s;
        -webkit-animation-delay: 1.2s;
      }

      @keyframes move {
        0% {
          left: 0;
          opacity: 0;
        }
        35% {
          left: 41%;
          -moz-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        65% {
          left: 59%;
          -moz-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        100% {
          left: 100%;
          -moz-transform: rotate(-180deg);
          -webkit-transform: rotate(-180deg);
          -o-transform: rotate(-180deg);
          transform: rotate(-180deg);
          opacity: 0;
        }
      }

      @-moz-keyframes move {
        0% {
          left: 0;
          opacity: 0;
        }
        35% {
          left: 41%;
          -moz-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        65% {
          left: 59%;
          -moz-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        100% {
          left: 100%;
          -moz-transform: rotate(-180deg);
          transform: rotate(-180deg);
          opacity: 0;
        }
      }

      @-webkit-keyframes move {
        0% {
          left: 0;
          opacity: 0;
        }
        35% {
          left: 41%;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        65% {
          left: 59%;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        100% {
          left: 100%;
          -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
          opacity: 0;
        }
      }

      @-o-keyframes move {
        0% {
          left: 0;
          opacity: 0;
        }
        35% {
          left: 41%;
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        65% {
          left: 59%;
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          opacity: 1;
        }
        100% {
          left: 100%;
          -o-transform: rotate(-180deg);
          transform: rotate(-180deg);
          opacity: 0;
        }
      }
    </style>
  </head>

  <body>
    <!-- Loading Indicator -->
    <div id="load">
      <div>G</div>
      <div>N</div>
      <div>I</div>
      <div>D</div>
      <div>A</div>
      <div>O</div>
      <div>L</div>
    </div>
    <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
    <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("flutter-first-frame", function () {
          navigator.serviceWorker.register("flutter_service_worker.js");
        });
      }
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
    <!-- Removes the loading indicator after 10 seconds -->
    <script>
      window.onload = function () {
        setTimeout(function () {
          var loadingIndicator = document.getElementById("loading_container");
          if (loadingIndicator) {
            loadingIndicator.remove();
          }
        }, 10000);
      };
    </script>
  </body>
</html>
